<template>
	<view class="container">
		<view class="voucher-page">
			<view class="voucher-title">个人入园凭证</view>
			<view class="reservation-time">
				<text>预约时间：</text>
				<text>{{ userInfo.date }}  ~ {{ userInfo.time }}</text>
			</view>
			<view class="reservation-info">
				<text style="font-size: 17px ;font-weight: bold;">预约信息</text>
				<view class="all">
				<view class="info-item">
					<text>姓名：{{ userInfo.name }}</text>
				</view>
				<view class="info-item">
					<text>证件类型：{{ userInfo.idType }}</text>
				</view>
				<view class="info-item">
					<text>证件号码：{{ userInfo.idNumber }}</text>
				</view>
				<view class="info-item">
					<text>手机号码：{{ userInfo.phone }}</text>
				</view>
				<view class="info-item">
					<text>同行儿童数：{{ userInfo.childCount }}</text>
				</view>
				<view class="info-item">
					<text>同行成人：{{ userInfo.companions }}</text>
				</view>
				</view>
			</view>
			<view class="hints">
				<text class="hint-text">园区花草，种植不易请爱护</text>
				<text class="countdown-text">离凭证消失剩余1天10小时23分钟，可发起新的预约</text>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				userInfo: {
					name: ' ',
					idType: ' ',
					idNumber: ' ',
					phoneNumber: ' ',
					teamName: ' ',
					totalPeople: 50,
				}
			};
		},
		
		
		onLoad() {
			// 从本地存储中读取数据
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},
		
	}
</script>

<style scoped>
	.voucher-page {
		padding: 20px;
		font-family: Arial, sans-serif;
	}

	.voucher-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
		margin-top: 10px;
		text-align: center;
	}

	.reservation-time {
		margin-top: 20px;
		text-align: center;
	}

	.reservation-info {
		margin-top: 50px;
		margin-bottom: -40px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		margin-top: 15px;
		margin-left: 10px;
	}
	.all{
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
		margin-top: 10px;
	}

	.hints {
		color: rgba(0, 0, 0, 0.5);
		font-size: 14px;
	}

	.hint-text {
		margin-top: 100px;
		display: block;
		text-align: center;
	}

	.countdown-text {
		margin-top: 100px;
		display: block;
		text-align: center;
	}

	.container {
		/* 设置背景图片 */
		background-image: url('https://pic.imgdb.cn/item/668bb1eed9c307b7e9d23979.png');
		/* 设置背景图片覆盖整个元素 */
		background-size: cover;
		/* 背景图片不重复 */
		background-repeat: no-repeat;
		/* 背景图片将随着页面滚动而滚动 */ 
		background-attachment: scroll;
		/* 可选：设置背景图片的位置，例如居中 */  
		background-position: center;  
		/* 设置元素高度（如果需要） */
		height: 95vh;
		/* 或者其他高度值 */
		/* 其他样式 */
	}
</style>